<template>
	<view class="user-info">
		<view class="info-container">
			<view class="user-title">
				<view class="left-image">
					<image src="/static/icons/u1469.png" mode=""></image>
				</view>
				<view class="right-text">
					<view class="top-name">{{useStore.userInfo?.name}}</view>
					<view class="button-age">
						<view style="margin-right: 20rpx;">{{useStore.userInfo?.gender==1?'男':'女'}}</view>
						<view>28岁</view>
					</view>
				</view>
			</view>
			<view class="user-num">
				<view style="margin-right: 20rpx;">身份证号</view>
				<view>{{useStore.userInfo?.IDnumber}}</view>
			</view>
			<view class="user-tel">
				<view style="margin-right: 20rpx;">联系电话</view>
				<view>{{useStore.userInfo?.phone}}</view>
			</view>
			<view class="user-address">
				<view style="margin-right: 20rpx;">家庭住址</view>
				<view>成都市</view>
			</view>
		</view>
	</view>
	<view class="list-info">
		<view class="table-user-info">
			<view class="list-text">签约机构</view>
			<view class="info-text">成都市高新区卫生服务站</view>
		</view>
		<view class="table-user-info">
			<view class="list-text">签约团队</view>
			<view class="info-text">{{signData?.signId?.teamId?.name}}</view>
		</view>
		<view class="table-user-info">
			<view class="list-text">签约医生</view>
			<view class="info-text">李明明</view>
		</view>
		<view class="table-user-info">
			<view class="list-text">服务包</view>
			<view class="info-text">中老年服务包</view>
		</view>
		<view class="table-user-info">
			<view class="list-text">签约周期</view>
			<view class="info-text">1年</view>
		</view>
		<view class="table-user-info">
			<view class="list-text">费用</view>
			<view class="info-text" style="color: red;">￥120</view>
		</view>
		<view class="table-user-info">
			<view class="list-text">生效日期</view>
			<view class="info-text">{{signData.time}}</view>
		</view>
		<view class="table-user-info">
			<view class="list-text">申请时间</view>
			<view class="info-text">{{signData.time}}</view>
		</view>
		<view class="table-user-info">
			<view class="list-text">审核时间</view>
			<view class="info-text">{{signData.time}}</view>
		</view>
		<view class="table-user-info">
			<view class="list-text">签约备注</view>
			<view class="info-text"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		useUserStore
	} from '../../store/user';
	import {
		getSigningRecordApi
	} from '../../api/sign';

	const useStore = useUserStore()
	// 获取到签约的进度
	const signData = ref({})

	onMounted(() => {
		getData()
	})
	const getData = () => {
		getSigningRecordApi({
				_id: '6874ae75fa7f9ee5dd89817a'
			})
			.then(res => {
				if (res.code == 200) {
					console.log(res.data[1]);
					signData.value = res.data[1]
				}
			})
	}
	const toPayment = () => {
		uni.navigateTo({
			url: '/minePackage/pages/payment/payment'
		})
	}
</script>

<style scoped lang="scss">
	.user-info {
		margin: 30rpx 32rpx;
		width: 670rpx;
		height: 352rpx;
		background-color: #2984f8;
		// margin-top: 20rpx;
		border-radius: 20rpx;
	}

	.info-container {
		padding: 30rpx 30rpx;

	}

	.right-text {
		margin-left: 30rpx;
		margin-top: 20rpx;
	}

	.user-title {
		display: flex;
	}

	.left-image {
		image {
			width: 112rpx;
			height: 112rpx;
		}
	}

	.top-name {
		font-size: 40rpx;
		color: #ffffff;
	}

	.button-age {
		font-size: 24rpx;
		color: #ffffff;
		display: flex;
	}

	.user-num,
	.user-tel,
	.user-address {
		font-size: 24rpx;
		color: #ffffff;
		display: flex;
		margin: 20rpx 0;
	}

	.list-info {
		padding: 0 32rpx;
	}

	.table-user-info {
		width: 710rpx;
		height: 88rpx;
		border-bottom: 1rpx solid #e5e5e5;
		display: flex;
		align-items: center;
	}

	.list-text {
		width: 112rpx;
		height: 40rpx;
		// border: 1rpx solid #2984f8;
		font-size: 28rpx;
		color: #999999;

	}

	.info-text {
		font-size: 28rpx;
		color: #333333;
		margin-left: 30rpx;
	}
</style>